<template>
  <div class="wrapper">
    <div class="top">
      <div class="top_header">
        <div class="iconfont top_header_back" @click="handleBack">&#xe603;</div>
        确认订单
      </div>
      <div class="top_receiver">
        <div class="top_receiver_title">收货地址</div>
        <div class="top_receiver_address">广东工贸职业技术学院（天河校区）</div>
        <div class="top_receiver_info">
          <span class="top_receiver_info_name">季节（先生）</span>
          <span class="top_receiver_info_name">13714722852</span>
        </div>
        <div class="iconfont top_receiver_icon">&#xe603;</div>
      </div>
    </div>
    <div
      class="product"
      v-for="outItem in orderData.orderInfo"
      :key="outItem.shopId"
    >
      <div class="product_title">
        {{ outItem.shopName }}
      </div>

      <div class="product_list">
        <div
          class="product_item"
          v-for="item in outItem.orderList"
          :key="item._id"
        >
          <img :src="item.imgUrl" class="product_item_img" />
          <div class="product_item_detail">
            <h4 class="product_item_title">{{ item.name }}</h4>
            <p class="product_item_price">
              <span>
                <span class="product_item_yen">&yen;</span>
                {{ item.price }} x {{ item.count }}
              </span>
              <span class="product_item_total">
                <span class="product_item_yen">&yen;</span>
                {{ (item.price * item.count).toFixed(2) }}
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="mask" v-if="showCart" @click="changeShowCart">
      <div class="mask_content" @click.stop>
        <h3 class="mask_content_title">确认离开收银台?</h3>
        <p class="mask_content_desc">请尽快完成支付，否则将被取消</p>
        <div class="mask_content_btns">
          <div
            class="mask_content_btn mask_content_btn--first"
            @click="handleConfirmOrder(true)"
          >
            取消订单
          </div>
          <div
            class="mask_content_btn mask_content_btn--last"
            @click="handleConfirmOrder(false)"
          >
            确认支付
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="order">
    <div class="order_price">
      实付金额：<b>￥{{ orderData.price }}</b>
    </div>
    <div class="order_btn" @click="changeShowCart">提交订单</div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { computed, ref } from "vue";
import { post } from "../../utils/request.js";
export default {
  name: "OrderCofirmations",
  setup() {
    const store = useStore();
    const router = useRouter();
    // const route = useRoute();
    // const shopId = parseInt(route.params.id)
    const cartList = store.state.cartList;
    const showCart = ref(false);
    const changeShowCart = () => {
      showCart.value = !showCart.value;
    };
    const handleBack = () => {
      router.back();
    };
    // 定义一个计算属性，用于获取订单里面所有相关数据
    const orderData = computed(() => {
      // 定义一个变量，用于存放总价
      let price = 0;
      // 存放当前店铺循环的商品信息

      const orderInfo = {};
      for (let e in cartList) {
        // 首先拿到当前这个店铺的所有商品信息
        let productList = cartList[e]?.productList;
        // 存放当前店铺循环的商品信息
       let shopInfo = { shopName: "", shopId: "", orderList: {} };
        shopInfo.shopName = cartList[e].shopName;
        shopInfo.shopId = cartList[e].shopId;
        let total = 0
        //具体商品信息
        for (let i in productList) {
          const product = productList[i];

          if (product.check && product.count > 0) {
            shopInfo.orderList[i] = product;
            price += product.count * product.price;
            total += product.count
          }
        }
        // 将当个订单的信息存放当中
        if(total>0){
          orderInfo[e] = shopInfo
        }
       
      }

      return { price: price.toFixed(2), orderInfo };
    });
    // 通过这个方法实现提交订单或者取消订单
    const handleConfirmOrder = async (isCanceled) => {
      // 通过循环获取每个店铺的ID
      for (let e in orderData.value.orderInfo) {
        // 定义一个空数组 ，用于存放订单的商品信息
        const products = [];
        for (let i in orderData.value.orderInfo[e].orderList) {
          const product = orderData.value.orderInfo[e].orderList[i];
          products.push({ id: parseInt(product._id, 10), num: product.count });
        }
        let shopId = orderData.value.orderInfo[e].shopId;
        let shopName = orderData.value.orderInfo[e].shopName;
        try {
          // 向后台提交数据
          const res = await post("/api/order", {
            addressId: 1,
            shopId,
            shopName,
            // 传递一个参数，让后端知道我这个订单是已经完成支付还是被取消了
            // 如果这个值为true，表示当前订单被取消，否则订单已经完成支付
            isCanceled,
            // 传递商品信息,要求传递进来的是商品的id和数量
            products,
          });
          console.log("res--", res);
          if (res?.errno === 0) {
            store.commit("clearOrderData", { shopId, isCanceled });
            // store.commit('clearOrderData',{shopId,isCanceled，products})
            router.push({ name: "OrderList" });
          }
        } catch (e) {
          alert("连接失败" + e);
        }
      }
    };
    return {
      cartList,
      handleBack,
      orderData,
      showCart,
      changeShowCart,
      handleConfirmOrder,
    };
  },
};
</script>



<style lang="scss" scoped>
.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0.4rem;
  background-color: #eee;
  padding: 0;
}
.top {
  position: relative;
  height: 1.96rem;
  background-size: 100% 1.59rem;
  background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
  background-repeat: no-repeat;
  background-color: #eee;
  &_header {
    position: relative;
    padding-top: 0.26rem;
    line-height: 0.24rem;
    color: #fff;
    text-align: center;
    font-size: 0.16rem;
    &_back {
      position: absolute;
      left: 0.18rem;
      font-size: 0.22rem;
    }
  }
  &_receiver {
    position: absolute;
    left: 0.18rem;
    right: 0.18rem;
    bottom: 0;
    background-color: #fff;
    height: 1.11rem;
    border-radius: 0.04rem;
    &_title {
      line-height: 0.22rem;
      padding: 0.16rem 0 0.14rem 0.16rem;
      font-size: 0.16rem;
      color: #333;
    }
    &_address {
      line-height: 0.2rem;
      padding: 0 0.4rem 0 0.16rem;
      font-size: 0.14rem;
      color: #333;
    }
    &_info {
      padding: 0.06rem 0 0 0.16rem;
      &_name {
        margin-right: 0.06rem;
        line-height: 0.18rem;
        font-size: 0.12rem;
        color: #666;
      }
    }
    &_icon {
      position: absolute;
      right: 0.16rem;
      top: 0.5rem;
      transform: rotate(180deg);
      color: #666;
      font-size: 0.2rem;
    }
  }
}
.product {
  margin: 0.16rem 0.18rem 0.1rem 0.18rem;
  background: #fff;
  &_title {
    padding: 0.16rem;
    font-size: 0.16rem;
    color: #333;
  }
  &_wrapper {
    overflow-y: scroll;
    margin: 0 0.18rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    top: 2.6rem;
  }
  &_list {
    background: #fff;
  }
  &_item {
    position: relative;
    display: flex;
    padding: 0 0.16rem 0.16rem 0.16rem;
    &_img {
      width: 0.46rem;
      height: 0.46rem;
      margin-right: 0.16rem;
    }
    &_detail {
      flex: 1;
    }
    &_title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #333;
    }
    &_price {
      display: flex;
      margin: 0.06rem 0 0 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #e93b3b;
    }
    &_total {
      flex: 1;
      text-align: right;
      color: #000;
    }
    &_yen {
      font-size: 0.12rem;
    }
  }
}

.order {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 0.49rem;
  line-height: 0.49rem;
  background: #fff;
  &_price {
    flex: 1;
    text-indent: 0.24rem;
    font-size: 0.14rem;
    color: #333;
  }
  &_btn {
    width: 0.98rem;
    background: #4fb0f9;
    color: #fff;
    text-align: center;
    font-size: 0.14rem;
  }
}
.mask {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  &_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 1.56rem;
    background: #fff;
    text-align: center;
    border-radius: 0.04rem;
    &_title {
      margin: 0.24rem 0 0 0;
      line-height: 0.26rem;
      font-size: 0.18rem;
      color: #333;
    }
    &_desc {
      margin: 0.08rem 0 0 0;
      font-size: 0.14rem;
      color: #666666;
    }
    &_btns {
      display: flex;
      margin: 0.24rem 0.58rem;
    }
    &_btn {
      flex: 1;
      width: 0.8rem;
      line-height: 0.32rem;
      border-radius: 0.16rem;
      font-size: 0.14rem;
      &--first {
        margin-right: 0.12rem;
        border: 0.01rem solid #4fb0f9;
        color: #4fb0f9;
      }
      &--last {
        margin-left: 0.12rem;
        background: #4fb0f9;
        color: #fff;
      }
    }
  }
}
</style>
